import React, {useState} from 'react';
import ReactEditor from "./ReactEditor"

export default function App() {
    const [code, updateCode] = useState(`
(props) => {
  useEffect(()=>{
    console.log(props);

    var myChart = echarts.init(divRef.current);
    myChart.setOption({
            title: { text: 'ECharts 入门示例' },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
  }, []);

  const [count, updateCount] = useState(0)
  const divRef = useRef();
  const {xm} = props; 
  // props 能拿到值;
  
  return (
    <>
      <div style={{color: "red"}}>
        <div>内部状态: {count} <button onClick={()=>updateCount(count+1)}>add</button></div>
        <div>外部传入:{xm} </div>
      </div>
      <div ref={divRef} style={{ width: 400, height: 400 }}></div>
    </>
    );
}        
  `);

  const codeProps = {
    xm: "张三",
  };

  return <ReactEditor code={code} codeProps={codeProps} onChange={(code) => updateCode(code)} showEditor={false}></ReactEditor>
}